<template>
	<!-- 运维界面-累计保额险种配置页面 -->
	<div class="fillcontain">
		<!-- 标题 -->
		<div class="fastQuery">
			<el-row>
				<el-col :span="6" class="fastQuery_title">
					<i class="el-icon-tickets"></i><span>累计保额险种配置</span></el-col>
				<el-col :span="8"></el-col>
			</el-row>
		</div>
		<el-form :model="searchParams" ref="ruleForm" label-width="100px" class="search_container">
			<el-row>
				<el-col :span="5">
					<el-form-item label="配置表">
						<el-select @change="qiehuan" v-model="searchParams.flag" placeholder="配置表">
							<el-option v-for="item in statTypes" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-col :span="10" class="common-box">
						<el-col :span="10" class="common-lab">
							<label class="labelName">险种码</label>
						</el-col>
						<el-col :span="14">
							<el-input clearable v-model="searchParams.crtable" placeholder=""></el-input>
						</el-col>
					</el-col>
				</el-col>
				<el-col :span="5" class="text_center">
					<el-button type="primary" icon="el-icon-search" @click="search"></el-button>
					<el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="contain">
			<!-- 操作按钮 -->
			<el-row class="bgfff pb20">
				<el-col :span="1.9">
					<el-button @click="exportExcel" type="danger" plain>导出</el-button>
				</el-col>
				<el-col :span="1.9">
					<el-upload ref="upload" :action="actionUrl" :show-file-list="false" :on-success="onSuccess" :on-error="onError"
					 :format="['xls']" :headers="myHeaders" :on-format-error="handleFormatError" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
						<el-button size="mini" type="danger" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button>
					</el-upload>
				</el-col>
			</el-row>
			<div class="table_container">
				<el-table v-loading="loading" :data="tableData" highlight-current-row header-cell-class-name="table-header-class"
				 style="width:100%">
					<template v-for="(col ,index) in cols">
						<el-table-column min-width="120" :property="col.prop" :label="col.label" align='center' :show-overflow-tooltip="true">
						</el-table-column>
					</template>
					<el-table-column fixed="right" label="操作" align='center' v-if="change == true">
						<template slot-scope="scope">
							<span class="operationIcon" @click="showEdit(scope.row)">
								<el-tooltip class="item" effect="light" content="编辑" placement="top">
									<i class="el-icon-document"></i>
								</el-tooltip>
							</span>
						</template>
					</el-table-column>
				</el-table>
				<el-row>
					<el-col :span="24">
						<div class="pagination">
							<el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
							 :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex' @current-change='handleCurrentChange'
							 @size-change='handleSizeChange'>
							</el-pagination>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 弹窗 -->
		<el-dialog title="编辑" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
		 width="60%" center>
			<el-form label-width="100px" class="search_container">
				<el-row>
					<el-col :span="21">
						<el-form-item label="业务编号">
							<el-input disabled v-model="batchConsole.sparamid"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="21">
						<el-form-item label="业务描述">
							<el-input v-model="batchConsole.sdesc" :maxlength="30"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="20">
						<el-form-item label="svalue">
							<el-input v-model="batchConsole.svalue" disabled type="textarea" :rows="8" resize="none">></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button icon="el-icon-plus" @click="editSvalueInfo" plain circle></el-button>
						<el-button icon="el-icon-delete" @click="removeSvalueInfo" plain circle></el-button>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="edit">保存</el-button>
			</div>
		</el-dialog>
		<!-- 弹窗 -->
		<el-dialog title="value将以逗号拼接" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="dialogSvalueFormVisible"
		 width="50%" center>
			<el-row>
				<el-col :span="24" class="pb15 pt15">
					<el-button @click="addSvalue" type="danger" plain>增加</el-button>
				</el-col>
			</el-row>
			<el-table :data="svalueList" highlight-current-row header-cell-class-name="table-header-class" max-height="350"
			 style="width:100%">
				<el-table-column property="value" label="value">
					<template slot-scope="scope">
						<el-input v-model="scope.row.value" />
					</template>
				</el-table-column>
				<el-table-column width="280" fixed="right" label="操作" align='center'>
					<template slot-scope="scope">
						<span class="operationIcon" @click="removeSvalue(scope.$index, scope.row)">
							<el-tooltip :disabled="scope.$index == 0" class="item" effect="light" content="删除">
								<i class="el-icon-delete"></i>
							</el-tooltip>
						</span>
					</template>
				</el-table-column>
			</el-table>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="listSvalue">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment';
	import {
		Message,
		MessageBox
	} from 'element-ui';
	import { getToken, setToken } from '@/utils/auth';
	import TaskConstants, {
		call,
		exportData
	} from "@/api/taskManager/common"
	import constant from '@/utils/constant';
	export default {
		data() {
			return {
				change: false,
				btnText: '数据导入',
				enabledUploadBtn: true,
				cols: [], //后端查出来的数据
				emptySearchParams: {}, //空的查询
				statTypes: [{
						name: "eufypf险种配置表",
						value: "eufypf",
					},
					{
						name: "sspl特殊险种配置",
						value: "sspl",
					}
				],
				uploadBtnIcon: "el-icon-upload2",
				//文件上传路由
				actionUrl: TaskConstants.apis.amountImport,
				dialogFormVisible: false,
				dialogSvalueFormVisible: false,
				svalueList: [],
				batchConsole: {
					sparamid: '',
					sdesc: '',
					svalue: ''
				},
				myHeaders:{'Authorization': getToken(constant.TOKEN) || ''},
				loading: false,
				tableData: [],
				searchParams: {
					crtable: '',
					flag: 'eufypf',
					pageSize: '',
					pageNumber: '',
				},
				//需要给分页组件传的信息
				paginations: {
					total: 0, // 总数
					pageIndex: 1, // 当前位于哪页
					pageSize: 10, // 1页显示多少条
					pageSizes: [5, 10, 15, 20], //每页显示多少条
					layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
				}
			}
		},
		created() {
			this.emptySearchParams = JSON.parse(JSON.stringify(this.searchParams));
		},

		methods: {
			onSuccess(response, file, fileList) {
				if (response.resultCode == constant.SUCCESS) {
					this.$message({
						message: '上传成功！',
						type: 'success'
					});
				} else {
					this.$message({
						message: '上传失败！',
						type: 'error'
					});
				}
				this.enabledUploadBtn = true;
				this.uploadBtnIcon = 'el-icon-upload2';
				this.btnText = '数据导入';

			},
			onError(err, file, fileList) {
				this.enabledUploadBtn = true;
				this.uploadBtnIcon = 'el-icon-upload2';
				this.btnText = '数据导入';
				this.$message({
					message: '上传失败！',
					type: 'error'
				});
			},
			beforeUpload(file) {
				this.enabledUploadBtn = false;
				this.uploadBtnIcon = 'el-icon-loading';
				this.btnText = '正在导入';
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: '文件格式不正确',
					desc: '文件 ' + file.name + ' 格式不正确，请上传.xls,.xlsx文件。'
				});
			},
			qiehuan(value) {
				this.tableData = [];
				this.cols = [];
				this.paginations.total = 0;
				this.paginations.currentPage = 0;
			},
			show() {
				this.$store.dispatch('loading/CHANGE_LOADING', true);
			},
			cancle() {
				this.$store.dispatch('loading/CHANGE_LOADING', false)
			},

			search() {
				this.paginations.total = 0;
				this.tableData = [];
				this.cols = [];
				this.change = false;
				this.searchParams.pageNumber = this.paginations.pageIndex;
				this.searchParams.pageSize = this.paginations.pageSize;
				this.show();
				call(TaskConstants.apis.amountQuery, this.searchParams, "post").then(result => {
					if (result.resultCode == constant.SUCCESS && result.data.list && result.data.list.length > 0) {
						let pageData = result.data;
						this.paginations.total = pageData.total;
						this.paginations.currentPage = pageData.pageNum;
						this.tableData = pageData.list;
						this.tableData.forEach((item, index) => {
							if (index == 0) {
								//遍历属性
								for (var key in item) {
									let col = {};
									col['prop'] = key
									col['label'] = key
									this.cols.push(col);
								}
							}
						})
						if (this.searchParams.flag == 'sspl') {
							this.change = true;
						} else {
							this.change = false;
						}
					}
					this.cancle();
				}).catch(err => {
					this.cancle();
				});
			},
			edit() {
				this.$store.dispatch('loading/CHNAGE_SUBLOADING', true);
				call(TaskConstants.apis.updateBySparamid,this.batchConsole,"post").then(res => {
					if (res.resultCode == constant.SUCCESS) {
						this.$message({
							message: '编辑成功！',
							type: 'success'
						});
						this.dialogFormVisible = false;
						this.search();
					}
					this.$store.dispatch('loading/CHNAGE_SUBLOADING', false);
				}).catch(err => {
					console.log(err);
					this.$store.dispatch('loading/CHNAGE_SUBLOADING', false);
				})
			},
			showEdit(row) {
				this.dialogFormVisible = true;
				if (row != null) {
					this.batchConsole.sparamid = row.sparamid;
					this.batchConsole.sdesc = row.sdesc;
					this.batchConsole.svalue = row.svalue;
				}
			},
			editSvalueInfo() {
				this.dialogSvalueFormVisible = true;
				this.svalueList = [];
				let svalueArr = this.batchConsole.svalue.split(',');
				for (let i = 0; i < svalueArr.length; i++) {
					if (svalueArr[i]) {
						let data = {
							value: svalueArr[i]
						};
						this.svalueList.push(data);
					}
				}
			},
			removeSvalueInfo() {
				MessageBox.confirm('清空值确认？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.batchConsole.svalue = '';
				});
			},
			addSvalue() {
				let data = {
					value: ''
				};
				this.svalueList.push(data);
			},
			removeSvalue(index, row) {
				this.svalueList.splice(index, 1);
			},
			listSvalue() {
				this.dialogSvalueFormVisible = false;
				let svalueStr = '';
				for (let i = 0; i < this.svalueList.length; i++) {
					let value = this.svalueList[i].value;
					if (value) {
						svalueStr += value + ',';
					}
				}
				if (svalueStr.length > 0) {
					svalueStr = svalueStr.substring(0, svalueStr.length - 1);
				}
				this.batchConsole.svalue = svalueStr;
			},
			// 每页多少条切换
			handleSizeChange(pageSize) {
				this.paginations.pageSize = pageSize;
				this.search();
			},
			// 上下分页
			handleCurrentChange(page) {
				this.paginations.pageIndex = page;
				this.search();
			},
			resetSearch() {
				this.searchParams = JSON.parse(JSON.stringify(this.emptySearchParams));
			},

			exportExcel() {
				let vueObj = this;
				exportData(vueObj, TaskConstants.apis.amountExport, "", "get", "累计保额配置表.xls",
					"application/vnd.ms-excel;charset=utf-8");
			},
			importExcel() {

			}
		}
	}
</script>
<style lang="less" scoped>
	.fillcontain {
		padding-bottom: 0;

		.fastQuery {
			padding: 15px 20px 10px 20px;
			background: #fff;
			border-bottom: 1px solid #e1e1e1;

			.fastQuery_title {
				color: #666;
				padding: 6px 0px;
			}
		}
	}

	.contain {
		background: #fff;
		padding: 10px;
		margin-bottom: 20px;
	}
</style>
